<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="header-left" :style="{ marginTop: safeTop + 'px' }" @click="goBack">
				<image src="/static/base/back.svg" class="back-icon" mode="aspectFit" />
			</view>
			<view class="header-title" :style="{ marginTop: safeTop + 'px' }">所有评论</view>
			<view class="header-right"></view>
		</view>

		<scroll-view scroll-y class="content">
			<view :style="{ height: contentTop + 'px' }"></view>

			<!-- 评论列表 -->
			<view class="comment-list">
				<view v-for="item in comments" :key="item.id" class="comment-item"
					@click="goToWorkDetail(item.work_id,item.work_type)">
					<!-- 头像区域 -->
					<view class="avatar-container">
						<image :src="item.avatar || '/static/default-avatar.png'" class="user-avatar"
							mode="aspectFill" />
						<image v-if="item.identity==1" :src="'/static/base/user-center/level/'+levelImg(item.work_level)" class="vip-badge"
							mode="aspectFit" />
					</view>

					<!-- 中间内容区域 -->
					<view :class="['comment-content', item.work_images ? 'has-work-image' : '']">
						<view class="user-info">
							<text class="user-name">{{ item.nickname || '匿名用户' }}</text>
							<text class="designer-tag" v-if="item.identity==2">
								<image class="designer-icon" src="/static/base/index/write.png"></image>
								设计师</text>
						</view>

						<!-- 交互类型：根据 type 判断 -->
						<text class="interaction-type">
							{{ item.type === 1 ? '评论了你的作品' : item.type === 2 ? '回复了评论' : '互动消息' }}
						</text>

						<text class="comment-text">{{ item.comment || '' }}</text>

						<!-- 操作按钮 -->
						<view class="action-buttons">
							<view class="reback-btn" @click.stop="replyComment(item)">
								<image src="/static/base/message/reply.png" style="width: 27rpx; height: 27rpx;"
									class="btn-icon" />
								回复
							</view>
							<view class="action-btn" @click.stop="likeComment(item)">
								<image v-if="!item.userLike" src="/static/base/index/good.png" class="btn-icon" />
								<image v-else src="/static/base/index/good-active.png" class="btn-icon" />
								赞
							</view>
						</view>
					</view>

					<!-- 时间 & 作品封面 -->
					<view style="text-align: right;">
						<text class="comment-time">{{ formatDate(item.add_time) }}</text>
						<view v-if="item.work_images" class="work-cover">
							<image :src="item.work_images" class="cover-image" mode="aspectFill" />
						</view>
					</view>
				</view>
			</view>

			<!-- 空状态 -->
			<view v-if="comments.length === 0 && !loading" class="empty-state">
				<!-- <image src="/static/base/empty.png" class="empty-icon" mode="aspectFit" /> -->
				<image :src="imgHost + '/statics/images/no-thing.png'"></image>
				<view class="empty-text">暂无评论消息</view>
			</view>

			<!-- 加载中（可选） -->
			<view v-if="loading" style="text-align: center; padding: 40rpx; color: #999;">加载中...</view>

			<view style="height: 84rpx;"></view>
		</scroll-view>

		<!-- 底部TabBar -->
		<TableBar :current="2" />
	</view>
</template>

<script>
	import TableBar from '@/components/base/table-bar/Index.vue'
	import {
		HTTP_REQUEST_URL
	} from '@/config/app';
	import {
		getMessageList,
		readMessage
	} from '@/api/base/message.js'
	import {
		commentLikeAdd
	} from '@/api/base/index.js' // 假设你把点赞方法放在这里，路径请根据实际调整

	export default {
		components: {
			TableBar
		},
		data() {
			return {
				imgHost: HTTP_REQUEST_URL,
				safeTop: 0,
				contentTop: 0,
				comments: [],
				loading: true
			}
		},
		onLoad() {
			const {
				barTop
			} = this.$util.getWXStatusHeight()
			this.safeTop = barTop
			this.contentTop = barTop + 40

		},
		onShow(){
			this.fetchMessageList()
			this.clearUnread()
		},
		methods: {
			levelImg(work_level) {
				const map = ['', '1.png', '2.png', '3.png', '4.png', '5.png'];
				return map[work_level];
			},
			clearUnread() {
				readMessage(1, 3).then(res => {
					if (res.status === 200) {
						console.log('标记消息已读成功')
					} else {
						console.log('标记消息已读失败', res.msg)
						uni.showToast({
							title: res.msg || '清除失败',
							icon: 'error'
						})
					}
				}).catch(err => {
					console.log('标记消息已读失败', err)
					uni.showToast({
						title: err || '清除失败',
						icon: 'error'
					})
				})
			},
			async fetchMessageList() {
				this.loading = true
				try {
					const res = await getMessageList(2, 1, 100)
					if (res.status === 200) {
						// 接口返回的是 list，直接赋值
						this.comments = res.data.list || []
					} else {
						uni.showToast({
							title: res.msg || '获取失败',
							icon: 'none'
						})
						this.comments = []
					}
				} catch (error) {
					console.error('获取评论列表失败:', error)
					uni.showToast({
						title: '获取消息失败',
						icon: 'none'
					})
					this.comments = []
				} finally {
					this.loading = false
				}
			},

			goBack() {
				uni.navigateBack()
			},

			goToWorkDetail(workId,workType) {
				if (!workId) return
				uni.navigateTo({
					url: `/pages/sub_base/creative-detail/index?id=${workId}&workType=${workType}`
				})
			},

			replyComment(comment) {
				uni.navigateTo({
					url: `/pages/sub_base/creative-detail/index?id=${comment.work_id}`
				})
			},

			async likeComment(comment) {
				try {
					// 调用点赞接口
					await commentLikeAdd(comment.comment_id,comment.work_type)

					// 更新本地状态
					const target = this.comments.find(c => c.id === comment.id)
					if (target) {
						target.userLike = !target.userLike
					}
				} catch (error) {
					console.error('点赞失败:', error)
					uni.showToast({
						title: '点赞失败',
						icon: 'none'
					})
					// 可选：恢复原状态
				}
			},

			// 格式化时间（假设 add_time 是 "YYYY-MM-DD HH:mm:ss"）
			formatDate(timeStr) {
				if (!timeStr) return ''
				const date = new Date(timeStr)
				const year = date.getFullYear()
				const month = String(date.getMonth() + 1).padStart(2, '0')
				const day = String(date.getDate()).padStart(2, '0')
				return `${String(year).slice(-2)}-${month}-${day}`
			}
		}
	}
</script>

<style scoped>
	.container {
		min-height: 100vh;
	}

	.header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		/* height: 44px; */
		background-color: #f9f9f9;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 33rpx;
		z-index: 100;
	}

	.header-left {
		width: 92rpx;
		height: 92rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.back-icon {
		margin-left: -35rpx;
		width: 50rpx;
		height: 50rpx;
	}

	.header-title {
		font-size: 38rpx;
		font-weight: 600;
		color: #333333;
	}

	.header-right {
		width: 92rpx;
	}

	.content {
		background-color: #F2F8FC;
		height: calc(100vh - 84rpx);
		/* 减去TabBar高度 */
	}

	.comment-list {
		background-color: ;
		margin: 25rpx 3rpx;
		overflow: hidden;
	}

	.comment-item {
		display: flex;
		padding: 25rpx;
		border-bottom: 2rpx solid #e5e5e5;
		align-items: flex-start;
	}

	.comment-item:last-child {
		border-bottom: none;
	}

	.avatar-container {
		position: relative;
		width: 84rpx;
		height: 84rpx;
	}

	.user-avatar {
		width: 84rpx;
		height: 84rpx;
		border-radius: 42rpx;
	}

	.vip-badge {
		position: absolute;
		bottom: 0;
		right: 0;
		width: 29rpx;
		height: 29rpx;
	}

	.comment-content {
		flex: 1;
		padding: 0 25rpx;
	}

	.comment-content.has-work-image {
		max-width: calc(100% - 188rpx);
		/* 80px → 167rpx + 25rpx padding ≈ 192rpx，保守取 188rpx */
	}

	.user-info {
		display: flex;
		align-items: center;
		margin-bottom: -8rpx;
	}

	.user-name {
		font-size: 25rpx;
		font-weight: 600;
		color: #333333;
		margin-right: 8rpx;
	}

	.interaction-type {
		font-size: 23rpx;
		color: #666666;
		margin-right: 8rpx;
	}

	.comment-time {
		font-size: 23rpx;
		color: #999999;
		margin-bottom: 4rpx;
	}

	.comment-text {
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 25rpx;
		color: #666666;
		line-height: 1.5;
		margin-bottom: 17rpx;
	}

	.action-buttons {
		display: flex;
		gap: 17rpx;
	}

	.reback-btn {
		display: flex;
		align-items: center;
		background-color: rgb(242, 143, 97);
		border-radius: 33rpx;
		padding: 8rpx 25rpx;
		font-size: 25rpx;
		color: #ffffff;
	}

	.action-btn {
		display: flex;
		align-items: center;
		background-color: #ffffff;
		border-radius: 33rpx;
		padding: 8rpx 25rpx;
		font-size: 25rpx;
		color: #666666;
	}

	.btn-icon {
		width: 29rpx;
		height: 29rpx;
		margin-right: 8rpx;
	}

	.work-cover {
		width: 167rpx;
		height: 167rpx;
		overflow: hidden;
	}

	.cover-image {
		width: 100%;
		height: 100%;
	}

	.empty-state {
		text-align: center;
		padding: 125rpx 42rpx;
	}

	.empty-icon {
		width: 200rpx;
		height: 200rpx;
		/* margin-bottom: 33rpx; */
	}

	.empty-text {
		font-size: 33rpx;
		color: #999999;
	}
	.designer-tag {
		display: flex;
		align-items: center;
		/* 保持原有样式 */
		font-size: 24rpx;
		padding: 0 14rpx 8rpx;
		/* 可根据需要调整 */
		margin-left: 24rpx;
		margin-top: 4rpx;
		border-radius: 30rpx;
		border: 2rpx solid #000;
		height: 44rpx;
	
		/* 新增：设置背景色和文字颜色，使其更清晰 */
		background-color: #fff;
		/* 或者透明 background-color: transparent; */
		color: #000;
	}
	.designer-icon {
		width: 22rpx;
		height: 22rpx;
		margin-right: 4rpx;
		/* 调整图标和文字之间的间距 */
		/* 如果需要垂直居中，可以加 margin-bottom: -2rpx; */
	}
</style>